<template>
	<view class="back-container animate-in">
		<view class="btn-group">
			<view class="btn back-btn" @click="goBack">
				<view class="btn-inner">
					<uni-icons type="arrow-left" size="20" color="#fff" />
					<text class="btn-text">返回</text>
				</view>
			</view>
			<view class="divider"></view>
			<view class="btn home-btn" @click="goHome">
				<view class="btn-inner">
					<uni-icons type="home-filled" size="20" color="#fff" />
					<text class="btn-text">首页</text>
				</view>
			</view>
			<view class="divider"></view>
			<view class="btn home-btn" @click="handleContact">
				<view class="btn-inner">
					<uni-icons type="phone-filled" size="20" color="#fff" />
					<text class="btn-text">客服</text>
				</view>
			</view>
		</view>
	</view>
	<contact ref="contactRef" />
</template>

<script setup>
	const contactRef = ref(null);

	const goBack = () => {
		uni.navigateBack();
	};

	const goHome = () => {
		uni.reLaunch({ url: '/pages/index/index' });
	};

	const handleContact = () => {
		contactRef.value.openContact();
	};
</script>

<style lang="scss" scoped>
	.back-container {
		position: fixed;
		left: 0;
		top: 70%;
		transform: translateY(-50%);
		padding: 4px;
		background: linear-gradient(135deg, rgba(64, 64, 64, 0.9), rgba(96, 96, 96, 0.95));
		border-radius: 0 8px 8px 0;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(8px);
		z-index: 99999;
		opacity: 0;
		transform: translateY(-50%) translateX(-100%);
		transition: all 0.3s ease;

		&.animate-in {
			animation: slideInFromLeft 0.5s ease forwards;
		}

		&:hover {
			transform: translateY(-50%) translateX(5px);
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 0.1);
		}
	}

	.btn-group {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 2px 0;
		gap: 1px;
	}

	.divider {
		width: 20px;
		height: 1px;
		background: rgba(255, 255, 255, 0.25);
		margin: 4px 0;
	}

	.btn {
		position: relative;
		width: 24px;
		height: 24px;
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.15);
		transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
		display: flex;
		align-items: center;
		justify-content: center;

		&::after {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 6px;
			background: rgba(255, 255, 255, 0.2);
			opacity: 0;
			transition: opacity 0.2s ease;
		}

		&:active::after {
			opacity: 1;
		}

		&-inner {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.uni-icons {
				transition: transform 0.3s ease;
			}

			&:hover .uni-icons {
				transform: scale(1.1);
			}
		}

		&-text {
			color: rgba(255, 255, 255, 0.9);
			font-size: 6px;
			font-weight: 500;
			letter-spacing: 0.3px;
		}

		&:hover {
			transform: translateX(5px);
			background: rgba(255, 255, 255, 0.25);
		}
	}

	.back-btn,
	.home-btn {
		&:active {
			transform: scale(0.92);
		}
	}

	.content-item {
		transition: all 0.3s ease;
		transform: translateY(0);
		animation: slideIn 0.5s ease forwards;

		&:hover {
			transform: translateY(-10px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
		}
	}

	@keyframes slideIn {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes slideInFromLeft {
		0% {
			opacity: 0;
			transform: translateY(-50%) translateX(-100%);
		}
		100% {
			opacity: 1;
			transform: translateY(-50%) translateX(0);
		}
	}
</style>
